<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div id="msg"></div>
        <input type='text' oninput="changevalue(this)"
    </div>
</body>
<script>
    //数据源
    var userinfo={
        name:'拼搏到无能为力，奋斗到感动自己'
    }
    //空对象，用于劫持
    var obj={}

    //数据绑定
    Object.defineProperty(obj,'name',{

        //获取数据时会触发
        get(){
            return userinfo.name
        },

        //修改数据时会触发
        set(data){
            userinfo.name=data;
            //通知dom进行更新
            document.querySelector('#msg').innerHTML=data
            //必须写，不然在严格模式下会报错
            return true
        }
    })

    //开始渲染数据
    document.querySelector('#msg').innerHTML=obj.name

    //发布订阅
    function changevalue(elobj){
        //输入框中的数据
        let value=elobj.value
        //更新数据源
        obj.name=value
        return true
    }

</script>
</html>